<template>
	<view class="feedback">
		<dwu-navbar title="意见反馈"></dwu-navbar>
		<view class="label">
			反馈意见<text>*</text>
		</view>
		<textarea v-model="feedback" name="" id="" cols="30" rows="10" placeholder="请输入反馈意见"></textarea>
		<view class="nickname">
			<view class="lable">
				联系人姓名
			</view>
			<view class="value">
				<input type="text" v-model="name" placeholder="请输入联系人姓名" />
			</view>
		</view>
		<view class="nickname">
			<view class="lable">
				联系电话
			</view>
			<view class="value">
				<input type="tel" v-model="mobile" placeholder="请输入联系电话" />
			</view>
		</view>
		<view class="submit" @click="onsubmit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feedback: '',
				name: '',
				mobile: '',
				userInfo: {}
			};
		},
		onLoad() {
			let dwuUserinfo = uni.getStorageSync('dwu_userinfo')
			this.userInfo = dwuUserinfo
			this.name = dwuUserinfo.nickname
			this.mobile = dwuUserinfo.mobile
		},
		methods: {
			onsubmit() {
				if (!this.feedback) {
					uni.showToast({
						title: '请输入反馈意见',
						icon: 'none'
					})
					return
				}
				this.request.http('/user/userAddFeedback', 'post', {
					username: this.name,
					phone: this.mobile,
					feedback_text: this.feedback
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						uni.showToast({
							title: '反馈成功'
						})
						this.feedback = ''
						this.name = this.userInfo.nickname
						this.mobile = this.userInfo.mobile
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.feedback {
		padding: 28rpx 20rpx;

		.label {
			padding-left: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #474747;
			display: flex;
			align-items: flex-start;
			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}
		}

		textarea {
			margin-top: 32rpx;
			padding: 24rpx 32rpx;
			width: 704rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
			border-radius: 35rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #333333;
			line-height: 38rpx;
		}

		.nickname {
			margin: 32rpx auto;
			padding: 24rpx 32rpx;
			width: 704rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lable {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #474747;
				line-height: 38rpx;
			}

			.value {
				text-align: right;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #999999;
			}
		}

		.submit {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 650rpx;
			height: 104rpx;
			box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
			border-radius: 40rpx;
			color: #B0DD67;
			background: #3D3D3D;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 31rpx;
			color: #B0DD67;
			line-height: 104rpx;
			text-align: center;
		}
	}
</style>